<template>
    <div class="home">
        <Header></Header>
        <div class="lbt">
            <!-- 轮播图 -->
            <!-- <div>
                <img src="@/assets/imgs/test.jpg">
            </div> -->
            <swiper ref="mySwiper" :options="swiperOptions">
                <swiper-slide><img src="@/assets/imgs/test.jpg"></swiper-slide>
                <swiper-slide><img src="@/assets/imgs/zhutu.jpg"></swiper-slide>
                <swiper-slide><img src="@/assets/imgs/test.jpg"></swiper-slide>
                <swiper-slide><img src="@/assets/imgs/zhutu.jpg"></swiper-slide>
                <swiper-slide><img src="@/assets/imgs/test.jpg"></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>

        <!-- 九宮格 -->
        <div class="navs">
            <div class="nav">
                <img src="@/assets/imgs/icon-qiandao.png">
                <span>签到</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-qiandao.png">
                <span>签到</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-qiandao.png">
                <span>签到</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-qiandao.png">
                <span>签到</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-qiandao.png">
                <span>签到</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-qiandao.png">
                <span>签到</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-qiandao.png">
                <span>签到</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-qiandao.png">
                <span>签到</span>
            </div>
        </div>

        <!-- 热卖商品 -->
        <div class="hotGoods">
            <div class="tit">热门商品</div>
            <div class="wrapper">
                <div class="main">
                    <div class="goods" v-for="(item,index) in goodsList" :key="index">
                        <div class="l">
                            <img src="@/assets/imgs/zhutu.jpg">
                        </div>
                        <div class="r">
                            <div class="title">{{item.name}}</div>
                            <div class="adress">{{item.adress}}</div>
                            <div class="price">{{item.price}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
//将组件导入进，也就是将公共部分抽取出去，在主要部分引入进行
import Header from "@/views/common/Header.vue"
// 导入滑动模块,也就是下拉列表
import BScroll from 'better-scroll';

//也就是使用组件
export default {
    components: {
        Header
    },
    name: 'carrousel',
    data () {
        return {
            goodsList: [
                {
                    name: "我们好像在哪里见到你一一样子的啊",
                    adress: "安徽",
                    price: 112
                },
                {
                    name: "我们好像在哪里见到你一一样子的啊",
                    adress: "安徽11",
                    price: 112

                },
                {
                    name: "我们好像在哪里见到你一一样子的啊",
                    adress: "安徽22",
                    price: 112

                },
                {
                    name: "我们好像在哪里见到你一一样子的啊",
                    adress: "安徽33",
                    price: 112

                },
                {
                    name: "我们好像在哪里见到你一一样子的啊",
                    adress: "安徽33",
                    price: 112

                },
                {
                    name: "我们好像在哪里见到你一一样子的啊",
                    adress: "安徽33",
                    price: 112

                },
                {
                    name: "我们好像在哪里见到你一一样子的啊",
                    adress: "安徽33",
                    price: 112

                },
                {
                    name: "我们好像在哪里见到你一一样子的啊",
                    adress: "安徽33",
                    price: 112

                },
                {
                    name: "我们好像在哪里见到你一一样子的啊",
                    adress: "安徽33",
                    price: 112

                },
                {
                    name: "我们好像在哪里见到你一一样子的啊",
                    adress: "安徽33",
                    price: 112

                }
            ],
            newGoodsList: [
                {
                    name: "dddddddddddddddddddddddddddddddddddd",
                    adress: "dddddddddddd",
                    price: 112

                },
                {
                    name: "dddddddddddddddddddddddddddddddddddd",
                    adress: "dddddddddddd",
                    price: 112

                },
                {
                    name: "dddddddddddddddddddddddddddddddddddd",
                    adress: "dddddddddddd",
                    price: 112

                }
            ],
            swiperOptions: {
                pagination: {
                    el: '.swiper-pagination'
                },
            }
        }
    },
    computed: {
        swiper () {
            return this.$refs.mySwiper.$swiper
        }
    },
    mounted () {
        //这里是swiper组件的
        this.swiper.slideTo(3, 1000, false)
        //这里是swiper组件的


        //这个是组件完成后开始执行相关代码
        this.$nextTick(() => {

            // 留心：盒子里面必须只能有一个元素
            let wrapper = document.querySelector('.wrapper')
            let scroll = new BScroll(wrapper, {
                pullUpLoad: {
                    threshold: 50
                }
            })
            // 监控
            scroll.on('pullingUp', () => {
                console.log('触发上拉刷新啦~~')
                console.log('加载中...')
                // 搞loading  （可以是文字可以是图片）

                // 发送异步请求 （注：通过setTimeout模仿）
                setTimeout(() => {
                    console.log('请求完毕')
                    // 1页面显示数据
                    this.goodsList = [...this.newGoodsList, ...this.goodsList]

                    // 3.切记切记切记：操作完成之后，一定要说一下上拉完毕
                    scroll.finishPullUp()
                }, 3000)
            })
        })
    }
}
</script>
<style  lang="scss" scoped >
@import "@/assets/css/common.scss";
//导入相关样式
.home {
    width: 100%;
    height: 100%;
    .lbt {
        width: 100%;

        overflow: hiddle;
        .swiper-wrapper {
            height: 100%;
        }
        img {
            width: 100%;
            height: 100%;
            height: px2rem(150);
        }
    }
    .navs {
        width: 100%;
        height: px2rem(176);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .nav {
            width: 25%;
            height: px2rem(88);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            img {
                width: px2rem(44);
                height: px2rem(44);
            }
            span {
                margin-top: px2rem(10);
            }
        }
    }
    .hotGoods {
        width: 100%;
        min-height: px2rem(100);
        //height: px2rem(300);
        .tit {
            width: 100%;
            height: px2rem(30);
            padding: px2rem(10);
            box-sizing: border-box;
        }
        .wrapper {
            width: 100%;
            height: px2rem(300);
            overflow: hidden;
        }
        .main {
            border-top: solid px2rem(1) #ccc;
            border-bottom: solid px2rem(1) #ccc;
            .goods {
                margin-top: px2rem(10);
                display: flex;
                position: relative;
                .cat {
                    position: absolute;
                    right: px2rem(5);
                    bottom: px2rem(5);
                }
                .l {
                    margin-left: px2rem(5);
                    img {
                        width: px2rem(80);
                        height: px2rem(80);
                    }
                }
                .r {
                    flex: 1;
                    margin-left: px2rem(8);
                }
            }
        }
    }
}
</style>